:root {
   --lightcolor1: #7042ab;
   --lightcolor2: #f6f7f8;
   --lightcolor3: #ae9cc4;
   --Ga2_t: #e3e5e7;
   --Ga3_t: #c9ccd0;
   --Ga4_t: #aeb3b9;
   --Ga7: #61666d;
   --brightcolor: #570bb8;
   --darkcolor: #3b087a;
   --boby: #f1f2f3;
   --bg: #f6f7f8;
   --rd: #e0e0e0;
   --text: #333;
   --color-primary: rgb(54, 68, 94);
}
/* html {
   font-size: 62.5%; 
} */
* {
   margin: 0px;
   padding: 0px;
}
html,
body {
   width: 100%;
   height: 100%;
   background-color: var(--boby);
}
/* .rgba-primary-0 { color: rgba(112, 66,171,1) }	
.rgba-primary-1 { color: rgba(221,211,235,1) }
.rgba-primary-2 { color: rgba(174,156,196,1) }
.rgba-primary-3 { color: rgba( 87, 11,184,1) }
.rgba-primary-4 { color: rgba( 59,  8,122,1) } */
@font-face {
   font-family: 'webfont';
   font-display: swap;
   src: url('//at.alicdn.com/t/webfont_p2na57p7n3.eot'); /* IE9*/
   src: url('//at.alicdn.com/t/webfont_p2na57p7n3.eot?#iefix')
         format('embedded-opentype'),
      /* IE6-IE8 */ url('//at.alicdn.com/t/webfont_p2na57p7n3.woff2')
         format('woff2'),
      url('//at.alicdn.com/t/webfont_p2na57p7n3.woff') format('woff'),
      /* chrome、firefox */ url('//at.alicdn.com/t/webfont_p2na57p7n3.ttf')
         format('truetype'),
      /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
         url('//at.alicdn.com/t/webfont_p2na57p7n3.svg#NotoSansHans-DemiLight')
         format('svg'); /* iOS 4.1- */
}
* {
   margin: 0px;
   padding: 0px;
}
.border {
   background: var(--bg);
   box-shadow: 3px 0px 4px var(--rd);
}
.border-rd-bottom {
   border-radius: 10px 10px 0px 0px /10px 10px 0px 0px;
}
.border-rd-top {
   border-radius: 0px 10px 10px 10px /0px 0px 10px 10px;
}
#app {
   font-family: 'webfont';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: var(--text);
   height: 100%;
   user-select: none;
   position: relative;
}
a {
   text-decoration: none;
   outline: none;
}
#nav {
   padding: 20px;
}
.playershowDiv {
   position: fixed;
   bottom: 0px;
   top: auto;
   left: 0px;
   height: 40px;
   right: 0px;
}
.music-player-content {
   position: relative;
   z-index: 999;
   display: flex;
   position: fixed;
   justify-content: space-between;
   align-items: center;
   bottom: 0px;
   top: auto;
   left: 0px;
   right: 0px;
   padding: 0px 10px;
}
.music-player-content-show {
   transform: translateY(0px);
}
.music-player-content > .music-operation {
   flex: 1;
   padding: 16px;
   position: relative;
}

.music-player-content > .music-operation > .operation > span {
   padding: 5px;
   display: inline-block;
   width: 30px;
   height: 30px;
   line-height: 30px;
   border-radius: 50%;
   transition: all 800ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.music-player-content > .music-operation > .operation > span:hover {
   background: repeating-radial-gradient(cornflowerblue 0%, transparent 95%)
      no-repeat;
}
.music-player-content > .music-operation > .operation > span:active {
   background-color: #570bb8;
}
.music-player-content > .music-operation > .operation svg {
   font-size: 18px;
   text-align: left;
}
.music-player-content > .music-operation > .music-progress-bar {
   position: relative;
   margin-right: 100px;
}
.music-player-content > .music-operation > .music-progress-bar > * {
   position: absolute;
   width: 100%;
}
.music-player-content
   > .music-operation
   > .music-progress-bar
   > .musi-progress-bg {
   background-color: #ddd3eb;
}
.music-player-content
   > .music-operation
   > .music-progress-bar
   > .progress-bar-width {
   width: 0%;
   background-color: cornflowerblue;
}
.musi-progress-bg,
.progress-bar-width {
   height: 4px;
   border-radius: 4px;
   transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.musi-progress-bg:hover {
   transform: scaleY(1.5);
   box-shadow: 0px 0px 5px #e0e0e0;
}
.musi-progress-bg:hover .progress-bar-width {
   transform: scaleY(1.5);
   box-shadow: 0px 0px 10px #e0e0e0;
}
.progress-bar-width:hover {
   transform: scaleY(1.5);
   box-shadow: 0px 0px 10px #e0e0e0;
}
.progress-label:hover {
   transform: scale(1.2);
   transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.music-player-content
   > .music-operation
   > .music-progress-bar
   > .progress-label {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background-color: cornflowerblue;
   margin-left: -7px;
   margin-top: -7px;
   border: 2px solid var(--boby);
   box-shadow: 0px 0px 5px #a1a1a1;
   transition: all 3 00ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.music-msg,
.music-img {
   display: inline-block;
   vertical-align: middle;
}
.music-player-content > .music-data > .music-img > img {
   margin: 0px;
   padding: 0px;
   width: 70px;
   height: 70px;
   border-radius: 100%;
}
.music-player-content > .music-data > .music-msg {
   font-size: 12px;
   text-align: left;
   margin-left: 3px;
   width: 100px;
}
.music-player-content > .music-data > .music-msg > .music-name {
   display: flex;
   align-items: center;
   font-size: 14px;
}
.music-player-content > .music-data > .music-msg > p {
   padding: 5px;
   background: #e0e0e0;
   border-radius: 3px;
   margin-bottom: 2px;

   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.music-player-content > .music-data > .music-msg > .music-name > span {
   font-size: 16px;
}
.music-player-content > .music-volume {
   display: flex;
   align-items: center;
}
.music-player-content > .music-volume > .music-volume-no,
.music-volume-off {
   width: 20px;
   text-align: left;
   padding: 5px;
}
.music-player-content > .music-list > svg {
   padding: 5px;
}
.music-player-content > .music-list > .music-list-show {
   position: absolute;
   right: -300px;
   bottom: 73px;
   width: 300px;
   height: 600px;
   box-shadow: 0px 3px 12px #e0e0e0;
   border-radius: 12px;
   background-color: var(--lightcolor2);
}
.anim-music-list {
   animation: music-list 500ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.anim-music-list-leave {
   animation: music-list-leave 500ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.operation {
   margin-bottom: 5px;
   display: flex;
   justify-content: center;
   transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.music-time {
   position: absolute;
   bottom: 10px;
   right: 30px;
   font-size: 14px;
   font-weight: 500;
   color: #a1a1a1;
}
.music-lyric {
   display: inline-block;
   font-size: 18px;
   font-weight: bold;
   color: cornflowerblue;
   text-shadow: 0px 0px 2px currentColor;
   position: relative;
   width: calc(100% - 200px);
}
.music-lyric > span {
   position: absolute;
   overflow: hidden;
   white-space: nowrap;
   letter-spacing: 2px;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   line-height: 40px;
}
/* .music-lyric-anim {
   animation: lyric-anim 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.music-lyric-anim-leave {
   animation: lyric-anim-leave 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)
      forwards;
} */
.var-slider {
   width: 75px;
   display: flex;
   align-items: center;
   transition: all 2250ms linear;
}
.slider-example_block {
   width: 24px;
   border: 1px solid #52af77;
   color: #52af77;
   height: 24px;
   margin: 0 -12px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: #ebebeb 0 2px 2px;
   border-radius: 50%;
   font-size: 12px;
   background-color: #fff;
}
.playershow {
   animation: playershow 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}
.playerhide {
   animation: playerhide 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}
.player-lock {
   position: absolute;
   top: 0px;
   right: 20px;
   margin-top: -25px;
   font-size: 13px;
   padding: 5px 5px 0px 5px;
}
.player-lock svg {
   padding: 5px;
   background-color: var(--bg);
   width: 15px;
   height: 15px;
   box-shadow: 0px -3px 4px var(--rd);
   border-radius: 10px 10px 0px 0px /10px 10px 0px 0px;
}
@keyframes playerShow {
   0% {
   }
}
@keyframes music-list {
   0% {
      right: -302px;
   }
   100% {
      right: 3px;
   }
}
@keyframes music-list-leave {
   0% {
      right: 3px;
   }
   100% {
      right: -302px;
   }
}
@keyframes playershow {
   0% {
      transform: translateY(120px);
   }
   100% {
      transform: translateY(0px);
   }
}
@keyframes playerhide {
   0% {
      transform: translateY(0px);
   }
   100% {
      transform: translateY(120px);
   }
}
